<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>商品分类win</title>
  	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html body{background: #fff !important}
        .aui-bar{padding:0.1rem 0.5rem 0.1rem 0rem;box-sizing:border-box;width: 100%;}
        .aui-pull-left{padding: 0 0.3rem 0 0.5rem}
        .aui-searchbar{height: 1rem;position: static !important;}
        .aui-border-radius{height: 1rem;line-height: 1rem;margin: 0;border-radius:0.2rem;padding-left: 0.2rem;}
        .aui-searchbar-input input{height: 1rem;font-size:0.373rem;display: flex;align-items: center;}
        .aui-searchbar-cancel{height: 1rem;line-height: 1rem;font-size:0.373rem;width: 1.5rem;color: #fff;}
        .iconsousuo1{font-size: 0.48rem !important;line-height: 1rem !important;color:#ff4c41;display: block;padding-right: 0.2rem}
        .iconsousuo1:before {content: "\e602";}
        /*tab分类*/
        .aui-tab .aui-tab-item{height: 1.2rem;line-height: 1.2rem;font-size:0.426rem;color:rgba(255,255,255,0.3);padding-top:0.1rem;}
        .aui-tab-item.aui-active{color: #fff;border: none;}
        .aui-active::after{content: "";display: block;margin:-6px auto 0 auto;width:2rem;height: 2px;
          background: #fff;box-sizing: border-box;}
        /*排序筛选*/
        .screenBox{width: 100%;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-around;height: 1.2rem;
          background: #f9f9f9;}
        .screenBox span{font-size: 0.426rem;padding-left: 0.1rem;}
        .activeScreen {color: #ff4c41}
    </style>
</head>
<body id="wrap">
    <header class="aui-bar aui-bar-nav aui-bar-light sg-color-font1 sg-color-bg2" id="aui-header">
        <a class="aui-pull-left"  tapmode onclick="closeWinFun()">
            <span class="aui-iconfont aui-icon-left sg-text-size36 sg-color-font4"></span>
        </a>
        <div class="aui-title sg-text-size36 sg-color-font4"></div>
    </header>
    <div class="contentArea">
        <!-- <div class="aui-tab sg-color-bg2" id="tab">
            <div class="aui-tab-item aui-active">淘宝天猫</div>
            <div class="aui-tab-item">拼多多</div>
            <div class="aui-tab-item">京东</div>
        </div> -->
        <div class="screenBox">
            <div class="activeScreen" tapmode onclick="screenFun(1)">综合</div>
            <div tapmode onclick="screenFun(2)">价格<span class="iconfont iconpaixu-jiangxu"></span></div>
            <div tapmode onclick="screenFun(3)">销量<span class="iconfont iconpaixu-jiangxu"></span></div>
            <div tapmode onclick="screenQuanFun()">只看券</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var tab = new auiTab({
     element:document.getElementById("tab"),
     index:1,
     repeatClick:false
 },function(ret){
     setFrameShow(ret.index - 1);
 });
var data1 = 1,data2 = '';
var Sort = '';
var quanSort = '';
var typeF = 0;
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    var header = $api.byId('aui-header');
		$api.fixStatusBar(header);
    $api.text($api.dom(".aui-title"), api.pageParam.name);
    // 打开当前对应frm组页面
    openFrameFun()
}
// 执行搜索(给历史搜索增加数据)
function search(){
    if(document.getElementById("search-input").value != ''){
        api.sendEvent({
            name: 'historySearchData',
            extra: {
                key: document.getElementById("search-input").value
            }
        });
    }
}
// 打开当前对应frm组页面
function openFrameFun(){
    api.openFrame({
        name: 'cidGoodsList',
        url: './cidGoodsList_frm.html',
        rect: {
            x: 0,
            y: $api.dom('#aui-header').offsetHeight + $api.dom('.contentArea').offsetHeight,
            w: 'auto',
            h: 'auto'
        },
        pageParam: {
            keyWords: api.pageParam.name
        },
        bounces: true,
        bgColor: 'rgba(0,0,0,0)',
        vScrollBarEnabled: true,
        hScrollBarEnabled: true
    });
}

// 搜索的筛选
function screenFun(data){
    var dom = document.querySelectorAll('.screenBox div');
    if(data == data1 && data == 1){  //综合重复点击不执行
        return
    }else{  //点击不同筛选按钮
        dom[data1-1].className = " ";
        dom[data-1].className = "activeScreen";
        if(data == 1){
            Sort = '';
        }else if(data == 2){  //点击价格排序
            if(Sort == 2 || Sort == '' || Sort == 1 || Sort == -1){ //首次点击价格筛选默认降序
                Sort = -2;
                dom[1].children[0].className = "iconfont iconpaixu-jiangxu";
            }else if (Sort == -2) {
                Sort = 2;
                dom[1].children[0].className = "iconfont iconpaixu-shengxu";
            }
        }else if(data == 3){  //点击销量排序
            if(Sort == -1 || Sort == '' || Sort == 2 || Sort == -2){ //首次点击销量筛选默认降序
                Sort = 1;
                dom[2].children[0].className = "iconfont iconpaixu-jiangxu";
            }else if (Sort == 1) {
                Sort = -1;
                dom[2].children[0].className = "iconfont iconpaixu-shengxu";
            }
        }
    }
    data1 = data;
    api.sendEvent({
        name: 'sortDataFun',
        extra: {
            Sort: Sort,
            quanSort:quanSort,
            pf:typeF
        }
    });
}

// 切换选中平台页面标签
function setFrameShow(index){
    if(index > 0){
        index++
    }
    typeF = index;
    // 设置选中平台
    console.log(typeF)
    api.sendEvent({
        name: 'sortDataFun',
        extra: {
            Sort: Sort,
            quanSort:quanSort,
            pf:typeF
        }
    });
}

// 是否有券的筛选(1表示只差有券的商品)
function screenQuanFun(){
    var dom = document.querySelectorAll('.screenBox div');
    if(quanSort == '' || quanSort == 1){ //查看有券商品
        dom[3].className = "activeScreen";
        quanSort = 2;
    }else if(quanSort == 2){//取消查看有券商品
        dom[3].className = " ";
        quanSort = 1;
    }
    api.sendEvent({
        name: 'sortDataFun',
        extra: {
            Sort: Sort,
            quanSort:quanSort,
            pf:typeF
        }
    });
}


// 关闭当前页面
function closeWinFun(){
    api.closeWin({});
}
</script>
</html>
